<template>
  <div class='meeting-people meeting-note'>
    <div class="meeting-search">
      <div v-for="(item,index) in meetingsData">
        <span class="meetings-label">{{item.label}}：</span>
        <el-input v-if="item.type=='input'" :key="index" v-model="searchInfo[item.key]" clearable  :placeholder="'请输入'+item.label"></el-input>
        <el-date-picker :key="index" v-else-if="item.type=='date'" v-model="searchInfo[item.key]" type="datetime" placeholder="选择日期时间" default-time="09:00:00">
        </el-date-picker>
        <el-select :key="index" v-else-if="item.type=='select'" v-model="searchInfo[item.key]" placeholder="请选择">
          <el-option v-for="(opt,optIndex) in $store.state.selectData[item.array].data" :key="optIndex" :label="opt.label" :value="opt.value"></el-option>
        </el-select>
      </div>
      <div>
        <el-button v-for="(item,index) in btnsData" :key="index" :type="item.type" class="btn-add fr" @click="item.click">{{item.label}}</el-button>
      </div>
    </div>

    <div class="meeting-p-table">
       <Table :modelData="modelData" :listData="listData" :handleSelectionChange="handleSelectionChange" :label="label"></Table>
    </div>
  </div>
</template>
<script>
import Table from "../../../../components/table";
export default {
  props:['label'],
  components: { Table },
  name: "",
  data() {
    return {
      searchInfo:{
        word:'',
      },
      meetingsData: [
        { key: "word", label: "部门", type: "input" },
      ],
      btnsData: [{ label: "搜索", type: "primary", click: this.search }],
      modelData: [
        // { myType: "select" },
        { myType: "index", label: "序号" },
        { myType: "normal", prop: "name", label: "部门" },
        { myType: "img", prop: "picture", label: "头像" },
      ],
      listData: []
    };
  },
  methods: {
    handleSelectionChange(selection){
      const currentAll=this.listData.map(val=>val.id)
      const currentSelect= selection.map(val=>val.id)
      const all = [...new Set([...this.$store.state.add.info.depIds,...currentSelect])]
      currentAll.forEach(ele=>{
        if(!currentSelect.includes(ele)&&all.includes(ele)){
          all.splice(all.indexOf(ele),1)
        }
      })
      this.$store.state.add.info.depIds=all
    },
    search() {
      this.getListData()
    },
    getListData(params){
      var params=this.searchInfo
      _g.apiPost('meeting/getDepartmentList.do',params).then(res=>{
        var goals=(this.$store.state.records.depVote||[]).map(val=>val.id).join(',')
        var results=[]
        res.data.forEach(ele=>{
          if(goals.indexOf(ele.id)>-1){
            results.push(ele)
          }
        })
        this.$set(this,'listData',results)
      })
    },
  },
  created() {},
  mounted() {
    this.getListData()
  }
};
</script>
<style lang="scss" scoped>
.meeting-people {
  padding: 0 20px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .meeting-search {
    margin: 15px 0;
    display: flex;
    min-height: 40px;

    > div {
      display: flex;
      margin-right: 20px;
    }
  }
  .meetings-label {
    display: inline-block;
    width: 80px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
  }
  .meetings-tab,
  .meeting-p-table {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  .meeting-p-table {
    overflow: auto;
  }
}
</style>